
<html>
<head>
	<meta charset="utf-8" />

    <style type="text/css">
        #error {
            margin: 1em 0;
            color: #f00;
            font-weight: bold;
        }
        footer {
            margin-top: 5em;
        }
    </style>
</head>

<body>
<div id="tts_demo"></div>

<div id="error"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="../js/google-tts.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        if (!window.GoogleTTS) {
           $("#error").text("Sorry, the google-tts script couldn't be loaded.");
           return;
        } else {
           var HTML = '\
            <div> \
                <select id="demo_language" style="left:5px;position:fixed;top:5px;"> \
                    <option value="" disabled="disabled">Select discipline...</option> \
                </select> \
            </div> \
            <div> \
                <select id="demo_topic" style="left:160px;position:fixed;top:5px;"> \
                    <option value="" disabled="disabled">Select subject...</option> \
                </select> \
            </div> \
            <div> \
                <select id="demo_grade" style="left:350px;position:fixed;top:5px;"> \
                    <option value="" disabled="disabled">Select grade...</option> \
                </select> \
            </div> \
             \
            ';
          $("#tts_demo").html(HTML);
        }

        var googleTts = new window.GoogleTTS();

        // setup language options
        $.each(googleTts.discipline(), function(key, value) {
            $('#demo_language').append('<option value="' + key + '">' + value + '</option>');
        });
	// setup language options
        $.each(googleTts.subject(), function(key, value) {
            $('#demo_topic').append('<option value="' + key + '">' + value + '</option>');
        });
         $.each(googleTts.grade(), function(key, value) {
            $('#demo_grade').append('<option value="' + key + '">' + value + '</option>');
        });
               
    });
    
    Ti.App.fireEvent('fromwebview', {
    	name:this.id
    });
	           
    
</script>


</body>
</html>